<template>
  <div class="p-4">
    <h2 class="text-lg font-bold mb-2">VxeModalPro 测试案例</h2>
    
    <button class="btn" @click="showPopup = true">切换主题 打开弹窗</button>
    <VxeModalPro  v-model="showPopup" title="测试弹窗" @close="visible = showPopup">
      <div>切换主题</div>
      <div class="border border-red-500 font-bold p-5" @click="() => VxeUI.setTheme('dark')">暗黑</div>
      <div class="border border-blue-500 font-bold p-5" @click="() => VxeUI.setTheme('light')">明亮</div>
    </VxeModalPro>
    <VxeModalPro  v-model="showPopup1" title="-1.基本使用" @close="visible = showPopup1">
         一个基础的弹窗示例
         showHeader:true  是否显示头部
         lock-view:true   是否锁住页面，不允许窗口之外的任何操作
         lock-scroll:true 是否锁住滚动条，不允许页面滚动
         mask:true        是否显示遮罩层
         show-close:true   是否显示关闭按钮
         show-title-overflow:true  设置标题内容过长时显示为省略号
         draggable:true   是否启用窗口拖动
    </VxeModalPro>
     <VxeModalPro :draggable="false" v-model="showPopup2" title="-2.指定容器+关闭后不销毁" @close="visible = showPopup2">
          在内容区域打开弹窗的示例+默认关闭后不销毁
         <vxe-input v-model="val2"></vxe-input>
    </VxeModalPro>
      <VxeModalPro :draggable="false" :height="400" :min-height="200" :loading="loading3" v-model="showPopup3" title="-3.内容高度自适应" @close="visible = showPopup3">
         <div v-if="!loading3" class="flex border border-blue-400 h-[600px]"> {{ val3 }}弹框高度：400， 内容高度：600</div>
         <!-- <div class="h-[100px]" v-else>
            
         </div> -->
     </VxeModalPro>
      <VxeModalPro  v-model="showPopup4" title="-4.可拖拽示例" @close="visible = showPopup4">
         draggable:true   是否启用窗口拖动 默认已经启用
    </VxeModalPro>
      <VxeModalPro ref="vxeModalProRef5" v-model="showPopup5" :title="title5" @close="visible = showPopup5">
        <vxe-button status="primary" content="修改弹框内容标题" @click="updateTitle5()"></vxe-button>
        <vxe-button status="primary" content="打开全屏" @click="updateFullscreen5()"></vxe-button>
    </VxeModalPro>
      <VxeModalPro  v-model="showPopup6" title="-6.内外数据共享示例" @close="visible = showPopup6">
    
    </VxeModalPro>
      <VxeModalPro  v-model="showPopup7" v-bind="modalOptions" title="-7.表单弹窗示例" @close="visible = showPopup7">
          <template #default>
            <vxe-form v-bind="formOptions" v-on="formEvents"></vxe-form>
          </template>
      </VxeModalPro>
      <VxeModalPro :height="400" :width="600"   v-model="showPopup8" title="-8.嵌套弹窗示例" @close="visible = showPopup8">
         <vxe-button status="primary" content="打开内弹框" @click="showPopup11=true"></vxe-button>
         <VxeModalPro  v-model="showPopup11" title="-11.内嵌弹窗" @close="visible = showPopup11">
          内嵌弹窗
        </VxeModalPro>
     </VxeModalPro>
      <VxeModalPro :backdropFilter="5" v-model="showPopup9" title="-9.遮罩模糊示例" @close="visible = showPopup9">
             遮罩模糊示例 扩展属性 :backdropFilter="5" 遮罩毛玻璃模糊强度【1-10】
     </VxeModalPro>
      <VxeModalPro  v-model="showPopup10" title="-10.轻量提示弹窗" @close="visible = showPopup10">
    
    </VxeModalPro>
    <div  class="flex border w-[500px] border-blue-300 flex-col">
        <div class="btn" @click="showPopup1 = true">-1.基本使用 </div> 
        <div class="btn" @click="showPopup2 = true">-2.指定容器+关闭后不销毁</div>
        <div class="btn" @click="showPopup3Fn()">-3.内容高度自适应</div>
        <div class="btn" @click="showPopup4 = true">-4.可拖拽示例</div>
        <div class="btn" @click="showPopup5 = true">-5.动态配置示例</div>
        <!-- <div class="btn" @click="showPopup6 = true">-6.内外数据共享示例</div> -->
        <div class="btn" @click="showPopup7 = true">-7.表单弹窗示例</div>
        <div class="btn" @click="showPopup8 = true">-8.嵌套弹窗示例</div>
        <div class="btn" @click="showPopup9Fn()">-9.遮罩层模糊示例</div>
        <!-- <div class="btn" @click="showPopup10 = true">-10.轻量提示弹窗</div> -->
    </div>
  </div>
</template>

<script setup>
import { ref,watch,reactive  } from 'vue';
import VxeModalPro from '@/components/VxeModalPro/index.vue';
// import VxeModalPro from "@cimom/ci-web-plugins-commom/VxeModalPro" //已测试 可用
import { VxeUI } from 'vxe-table'
const showPopup = ref(false);
const showPopup1 = ref(false);
const showPopup2 = ref(false);
const showPopup3 = ref(false);
const showPopup4 = ref(false);
const showPopup5 = ref(false);
const showPopup6 = ref(false);
const showPopup7 = ref(false);
const showPopup8 = ref(false);
const showPopup9 = ref(false);
const showPopup10 = ref(false);
const showPopup11 = ref(false);
const fullscreen5 = ref(false);
const vxeModalProRef5 = ref(null);
const title5=ref("-5.动态配置示例" )
const val2 =ref()
const val3 =ref("固定高度内容...")
const loading3 = ref(false)

const modalOptions = reactive({
  title: '在弹窗中使用表单',
  width: 800,
  height: 400,
  escClosable: true,
  resize: true,
  showMaximize: true
})
const sexItemRender = reactive({
  name: 'VxeSelect',
  options: [
    { label: '女', value: 'Women' },
    { label: '男', value: 'Man' }
  ]
})
const formOptions = reactive({
  data: {
    name: '',
    role: '',
    sex: '',
    age: '',
    address: ''
  },
  rules: {
    name: [
      { required: true, message: '名称必填' }
    ],
    role: [
      { required: true, message: '角色必填' }
    ],
    sex: [
      { required: true, message: '性别必选' }
    ],
    age: [
      { required: true, message: '年龄必填' },
      { type: 'number', min: 18, max: 46, message: '年龄范围18~46' }
    ]
  },
  items: [
    { field: 'name', title: '名称', span: 24, itemRender: { name: 'VxeInput' } },
    { field: 'role', title: '角色', span: 24, itemRender: { name: 'VxeInput' } },
    { field: 'sex', title: '性别', span: 12, itemRender: sexItemRender },
    { field: 'age', title: '年龄', span: 12, itemRender: { name: 'VxeNumberInput', props: { type: 'integer' } } },
    { field: 'address', title: '地址', span: 24, itemRender: { name: 'VxeTextarea' } },
    {
      align: 'center',
      span: 24,
      itemRender: {
        name: 'VxeButtonGroup',
        options: [
          { type: 'submit', content: '提交', status: 'primary' },
          { type: 'reset', content: '重置' }
        ]
      }
    }
  ]
})
const formEvents = {
  submit () {
    console.log('保存成功', JSON.stringify(formOptions.data))
  },
  reset () {
    console.log('重置事件')
  }
}
// 监控loading3 改变
watch(loading3, (val) => {
  if (val) {
    setTimeout(() => {
      loading3.value = false
    }, 3000)
  }
})
function updateFullscreen5(){
  if (vxeModalProRef5.value &&  vxeModalProRef5.value.Instance) {
    vxeModalProRef5.value.Instance().zoom();
  }
}
function updateTitle5(){
  title5.value = "动态配置示例"
}
function showPopup3Fn(){
  showPopup3.value = true
  loading3.value = true
}
// 弹出框 实现弹框遮罩层类似毛玻璃的模糊效果
function showPopup9Fn(){
  showPopup9.value = true
}
</script>

<style scoped>
/* 强力覆盖 vxe-modal 遮罩层毛玻璃效果 */
/* ::v-deep .vxe-modal--wrapper {
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
} */
</style>
